<template>
    <div class="payment-record-background">
        <van-row type="flex" class="payment-record-title">
            <van-col span="24">{{list.length>0?'以下是您的缴费记录':'暂无缴费记录'}}</van-col>
        </van-row>
        <!-- finished  是否已加载完成，加载完成后不再触发load事件 Boolean false -->
        <van-list v-model="loading" :finished="finished" @load="onLoad" loading-text='拼命加载中...' style="background:#f7f6f6;padding-bottom: 20px">
            <van-cell v-for="item in list" :key="item.vehNo" class='payment-record-cell'>
                <van-row style='margin-bottom:10px'>
                    <van-col span="12" v-carplate-text='[item.vehNo,item.platColor]'></van-col>
                    <van-col span="12" class='payment-record-col-date'>{{'2017-07-31'|dateFormat('YYYY-MM-DD hh:mm:ss')}}</van-col>
                </van-row>
                <van-row>
                    <van-col span="14">历下区停车运营公司</van-col>
                    <van-col span="10" offset=0 class='payment-record-col-money'>{{12366666| formatMoneyPenny('￥',"2")}}</van-col>
                </van-row>
            </van-cell>
        </van-list>
    </div>
</template>
<script>
export default {
    name: 'paymentRecord',
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
        };
    },
    created() {

        this.list = [{
                'vehNo': '鲁A 12345',
                'platColor': '1'
            },
            {
                'vehNo': '鲁B 55555',
                'platColor': '2'
            }, {
                'vehNo': '鲁C 66666',
                'platColor': '3'
            }, {
                'vehNo': '鲁D 88888',
                'platColor': '4'
            }, {
                'vehNo': '鲁E 90909',
                'platColor': '5'
            },
            {
                'vehNo': '鲁A 123645',
                'platColor': '1'
            },
            {
                'vehNo': '鲁B 555655',
                'platColor': '2'
            }, {
                'vehNo': '鲁C 666666',
                'platColor': '3'
            }, {
                'vehNo': '鲁D 888688',
                'platColor': '4'
            }, {
                'vehNo': '鲁E 909609',
                'platColor': '5'
            }
        ];
    },
    methods: {
        onLoad: function() {
          this.loading=false;
          this.finished=true;           
        }
    },
};
</script>
<style scoped>
.payment-record-background {
    position: relative;
    left: 0px;
    top: 0px;
    background: #f7f6f6;
    height: 100vh;
}

.payment-record-title {
    color: #3DA6FF;
    text-align: center;
    padding: 20px;
}

.payment-record-cell {
    margin: 10px 3%;
    width: 94%;
}

.payment-record-col-date {
    text-align: right;
    color: #797979;
}

.payment-record-col-money {
    text-align: right;
    color: #FF8D00;
}
</style>
